<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父节点和子节点</title>
		<style type="text/css">
			#div1{
				width: 500px;
				height: 500px;
				background-color: aqua;
			}
			#div2{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
			#div3{
				width:100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	
	<body>		
		<div id="div1">
			<p>这是第一个DIV</p>
			<div id="div2">
					这是第二个DIV
				<div id="div3">
						这是第三个DIV
				</div>
			</div>
		</div>
		<button type="button" onclick="dochange();">按钮</button><br />
		用户名：<input type="text" name="userName" /><br />
		密码：<input type="password" name="password" /><br />
		自我介绍：<textarea rows="" cols="" name="introduce"></textarea><br />
		<select name="fruit">
			<option value="1">苹果</option>
			<option value="2">苹果2</option>
			<option value="3">苹果3</option>
			<option value="4">苹果4</option>
			<option value="5">苹果5</option>
		</select>
		<button type="button" onclick="getValue();">按钮2</button><br />
	</body>
	<script type="text/javascript">
		var div2Obj = document.getElementById('div2')
		//Element 元素（标签）-->html
		//node(有多个种类，其中最重要的节点类型就是Element) 节点 -->document
		//父节点和父元素
		console.log(div2Obj.parentElement.parentElement.parentElement.parentElement)
		console.log(div2Obj.parentNode.parentNode.parentNode.parentNode)
		console.log('-----------------------------------------------------------')
		//子节点和子元素
		var div1Obj = document.getElementById('div1')
		console.log(div1Obj.children)
		console.log(div1Obj.childNodes)
		
		console.log(div2Obj.children)
		console.log(div2Obj.childNodes)
		//
		var div3Obj = document.getElementById('div3')
		console.log(div2Obj.innerText )
		console.log(div2Obj.innerHTML )
		//
		
		
		function dochange(){
			//div2Obj.innerText = 'abc'
			div2Obj.innerHTML = '<p>新段落</p>'
		}
		function getValue(){
			console.log(document.getElementsByName('userName')[0].value);
			console.log(document.getElementsByName('password')[0].value);
			console.log(document.getElementsByName('introduce')[0].value);
			console.log(document.getElementsByName('fruit')[0].value);
			
			document.getElementsByName('userName')[0].value = 'test';
			document.getElementsByName('password')[0].value = '88888';
			document.getElementsByName('introduce')[0].value = '自我介绍';
		}
	</script>
</html>